<template>
    <div>
        <van-nav-bar class="navBar" title="代人缴费" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
        <div class="mainWrap fixedMain">
            <div class="searchNum">
                <plateNumber class="plateNumber" :noLabel="false" @getPlateLicense="getPlateLicense"></plateNumber>
                <van-button class="searchBtn" slot="action" type="info" size="mini" @click="onSearch">搜索</van-button>
            </div>
            <!-- <van-search
                v-model="params.carNum"
                placeholder="搜索车牌"
                @search="onSearch"
                show-action
                background="#dcdfe6"
                >
                <van-button class="searchBtn" slot="action" type="info" size="small" @click="onSearch">搜索</van-button>
            </van-search> -->
            <!-- <van-card class="vanCard"
                v-for="(item,index) in payTasadayList"  :key="index"
                :thumb="item.imgUrl"
                @click-thumb="imgPreview(item)"
                >
                <template #title>
                    <p v-if="item.carType==1">月租车</p> 
                    <p v-if="item.carType==2">储值车</p> 
                    <p v-if="item.carType==3">免费车</p> 
                    <p v-if="item.carType==4">临时车</p> 
                    <p v-if="item.carType==5">时段限制月租</p> 
                </template>
                <template #desc>
                    <p >车牌：{{item.carNum}}</p>
                    <p >入场：{{item.inTime}}</p>
                    <p v-if="item.outTime">出场：{{item.outTime}}</p>
                    <p v-if="item.remarks">优惠信息：{{item.remarks}}</p>
                    <p v-if="item.payMoney">收费金额：{{item.payMoney}}</p>
                    <p class="pFooter"  >
                        <van-button type="info" size="mini" @click="payBack(item)" v-if="item.outTime">支付</van-button>
                        <van-button type="info" size="mini" @click="advancePay(item)" v-else>预付</van-button>
                    </p>
                </template>
            </van-card> -->
            <van-card  class="vanCard" v-for="(item,index) in payTasadayList" :key="index">
                <template #title>
                    <van-row type="flex" >
                        <van-col span="24">
                            <van-col span="12" class="vanCol">
                                <span v-if="item.carType==1">月租车</span>
                                <span v-else-if="item.carType==2">储值车</span>
                                <span v-else-if="item.carType==3">免费车</span>
                                <span v-else-if="item.carType==4">临时车</span>
                                <span v-else-if="item.carType==5">时段限制月租</span>
                                <span v-else>无</span>
                            </van-col>
                            <van-col span="12" class="vanCol">车牌:{{item.carNum}}</van-col>
                        </van-col>
                        <van-col span="24">
                            <van-col span="12" class="vanCol">入场:{{item.inTime}}</van-col>
                            <van-col span="12" class="vanCol" v-if="item.outTime"><div>出场:{{item.outTime?item.outTime:"无"}}</div></van-col>
                            <van-col span="24" class="vanCol"><div>优惠信息:{{item.stayTime?item.stayTime:0}}</div></van-col>
                        </van-col>
                        <van-col span="24">
                            <van-col span="12" class="vanCol" ><div v-if="item.outTime">收费金额:{{item.orderMoney?item.orderMoney:0}}元</div></van-col>
                            <van-col span="12" class="vanCol btnWrap">
                                <van-button type="info" size="mini" @click="payBack(item)" v-if="item.outTime">支付</van-button>
                                <van-button type="info" size="mini" @click="advancePay(item)" v-else>预付</van-button>
                            </van-col>
                        </van-col>
                    </van-row>
                    <van-row type="flex" >
                        <van-col span="12" class="vanCol">
                            <span class="photoLabel">进场照片：</span>
                            <img :src="item.imgUrl" alt="" srcset="" @click="imgPreview(item.imgUrl)">
                        </van-col>
                        <van-col span="12" class="vanCol" v-if="item.outTime">
                            <span class="photoLabel">出场照片：</span>
                            <img :src="item.outImgUrl" alt="" srcset="" @click="imgPreview(item.outImgUrl)">
                        </van-col>
                    </van-row>
                </template>
            </van-card>
            <div class="noSearch" v-if="payTasadayList.length === 0">暂无查询数据</div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
import { ImagePreview } from 'vant';
import plateNumber from '@/components/plateNumber'
export default {
    components: {
        [ImagePreview.Component.name]: ImagePreview.Component,
        plateNumber
    },
    data(){
        return {
            searchVal:"",
            finished: false,
            loading: false,
            payTasadayList:[],
            params:{
                carNum:""
            }
        }
    },
    computed: {
        ...mapGetters(['user'])
    },
    created(){
        /* this.params.carNum = this.user.id
        this.init() */
    },
    methods:{
        //返回
        onClickLeft(){
            this.$router.go(-1)
        },
        onSearch(){
            if(this.params.carNum==""){
                this.$toast("请输入车牌号码");
                return
            }else if(this.params.carNum.length<=6){
                this.$toast("请输入正确的车牌号码");
                return
            }else{                
                this.init()
            }
        },
        getPlateLicense(data){
            this.params.carNum = data
        },
        init(){
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            this.$api.owner.getPayTasadayList(this.params).then(res=>{
                this.$toast.clear();
                if(res.code == 200){
                    if(res.result&&res.result.length>0){
                        let rows = res.result; //请求返回当页的列表
                        this.payTasadayList = rows
                    }
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.$toast.clear();
                this.loading = false;
            });
        },
        imgPreview(url){
            ImagePreview({
                images: [url],
                showIndex:true,
                closeable: true,
            });
        },
        //支付
        payBack(item){
            let domT = ''
            //   let ua = navigator.userAgent.toLowerCase()
            if (/MicroMessenger/.test(window.navigator.userAgent)) {
                domT = 'weixin'
            }
            if (/AlipayClient/.test(window.navigator.userAgent)) {
                domT = 'alipay'
            }
            let that = this
            let data = {
                channel: domT, 
                recordId: item.id
            }
            let formData = new FormData();
                formData.append('channel','weixin');
                formData.append('recordId',item.id);
            this.$api.owner.getpayadress(formData).then(res => {
                if (+res.code === 200) {
                    window.location.href = res.result
                } else {
                    this.$toast(`${res.message}`)
                }
            }).catch(error => {
                this.$toast(`${error}`)
            })
        },
        //预付
        advancePay(item){
            let domT = ''
            //   let ua = navigator.userAgent.toLowerCase()
            if (/MicroMessenger/.test(window.navigator.userAgent)) {
                domT = 'weixin'
            }
            if (/AlipayClient/.test(window.navigator.userAgent)) {
                domT = 'alipay'
            }
            let that = this
            let data = {
                channel: domT, 
                recordId: item.id
            }
            let formData = new FormData();
                formData.append('channel','weixin');
                formData.append('recordId',item.id);
            this.$api.owner.getAdvancePay(formData).then(res => {
                if (+res.code === 200) {
                    window.location.href = res.result
                } else {
                    this.$toast(`${res.message}`)
                }
            }).catch(error => {
                this.$toast(`${error}`)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.searchNum{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .plateNumber{
        display: inline-flex;
        flex: 1;
        /deep/ .card-header{
            width: 1.2rem;
            padding-right: 0.1rem;
            margin-right: 0;
        }
    }
    .searchBtn{
        width: 1rem;
        margin-right: 10px;
    }
}
.van-card{
    .vanCol{
        padding-bottom:.1rem ;
        img{
            max-width: 95%;
            max-height: 2rem;
        }
        .photoLabel{
            display: inline-block;
            margin-bottom: .1rem;
        }
        &.btnWrap{
            text-align: right;
        }
    }
    .pFooter{
        text-align: right;
    }
}
</style>